<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content {
            width: 180px;
            height: 180px;
            border: 1px solid #000;
            margin: 20px;
        }

        a {
            display: block;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #FFECE4;
            text-decoration: none;
        }

        a:hover {
            background-color: blue;
            color: #FFF;
        }

        a:nth-child(2) {
            position: relative;
            left: 120px;
            top: -60px;
        }

        a:nth-child(3) {
            position: relative;
            left: 60px;
            top: -60px;
        }

        a:nth-child(4) {
            position: relative;
            top: -60px;
        }

        a:nth-child(5) {
            position: relative;
            left: 120px;
            top: -120px;
        }

        p:nth-child(2) {
            border: 3px solid blue;
        }

        .item:nth-of-type(1) {
            border: 3px solid red;
            font-weight: 700;
        }

        .flex {
            display: flex;
            justify-content: flex-start;

        }

        .el {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: white;
            border-radius: 50%;
            border: 30px solid red;
            margin: 100px;
            animation-name: change;
            animation-duration: 1s;
            animation-iteration-count: 100;
            animation-delay: 0s;
        }

        .el2 {
            width: 400px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            border: 3px dotted violet;
            border-radius: 0 50% 50% 0;
            box-shadow: 0 0 100px red;
            background-color: #d9d9d9;
            filter:blur(1px);
        }

        @keyframes change {
            0% {
                background-color: yellow;
                transform: rotate(0deg);
            }

            50% {
                background-color: #2486ff;
                transform: rotate(180deg) scale(1.2);


            }

            100% {
                background-color: seagreen;
                transform: rotate(360deg) scale(1);
            }
        }


    </style>
</head>
<body>
<div class="content">
    <a href="#">链接一</a>
    <a href="#">链接二</a>
    <a href="#">链接三</a>
    <a href="#">链接四</a>
    <a href="#">链接五</a>
</div>

<div>
    <p>我是一号</p>
    <p>我是二号</p>
    <p>我是三号</p>
    <div>
        <p class="item">我是四号</p>
        <p>我是五号</p>
        <p class='item'>我是六号</p>
    </div>
</div>

<div class="flex">
    <div class="el">
        book
    </div>

    <div class="el2">
        bullet
    </div>
</div>
</body>
</html>